/* 样式表 */  
body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
    background-color: #f5f5f5;   
}  

/* 头部导航栏 */
header { 
    background-color: #f9d4f4; 
    padding: 20px;  
    text-align: center;  
    color: #333;   
}  
  
nav ul {  
    list-style-type: none;  
    padding: 0;  
    margin: 0;  
    display: flex;  
    justify-content: center;  
    background-color: #f0f0f0;   
}  
  
nav ul li {  
    margin: 0 10px;  
}  
  
nav ul li a {  
    text-decoration: none;  
    color: #666;  
    padding: 10px 15px;   
    border-radius: 5px;   
    transition: background-color 0.3s ease;   
}  
  
nav ul li a:hover {  
    background-color: #f9d4f4;  
}  
  
main {  
    padding: 20px;  
}  
  /* 订单列表 */
.order-list {  
    margin-top: 20px;  
}  
  
.order-item {  
    border: 1px solid #ddd;  
    padding: 15px;  
    margin-bottom: 10px;  
    background-color: #fff;   
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);   
}  
 /* 详情按钮  */
.btn-details {  
    background-color: #f08080;   
    border: none;  
    color: white;  
    padding: 5px 10px;  
    text-decoration: none;  
    display: inline-block;  
    font-size: 16px;  
    margin-bottom: 10px;  
    cursor: pointer;  
    border-radius: 5px;  
    transition: background-color 0.3s ease;   
}  
  
.btn-details:hover {  
    background-color: #ff5733;   
}  
  /* 订单详情弹窗 */
.modal {  
    display: none;   
    position: fixed; /* 固定在屏幕上 */  
    z-index: 1;   
    left: 0;  
    top: 0;  
    width: 100%; 
    height: 100%;  
    overflow: auto; /* 允许滚动条 */  
    background-color: rgba(0,0,0,0.5);   
    transition: opacity 0.5s ease;   
}  

.modal-content {  
    background-color: #fff;   
    margin: auto;  
    padding: 20px;  
    border: none; /* 去除边框 */  
    width: 80%;   
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);   
    border-radius: 5px;   
}  

 /* 内容区域样式 */  
.modal-content {  
    background-color: #fefefe;  
    margin: auto;  
    padding: 20px;  
    border: 1px solid #888;  
    width: 80%;  
    max-width: 600px; /* 限制最大宽度 */  
    position: relative; /* 用于定位关闭按钮 */  
    display: flex;   
    flex-wrap: wrap;  
}  
  
/* 关闭按钮样式 */  
.close {  
    color: #aaa;  
    float: right;  
    font-size: 28px;  
    font-weight: bold;  
    cursor: pointer;  
    transition: color 0.3s ease;  
    position: absolute;  
    top: 10px;  
    right: 15px;
}  
  
.close:hover,  
.close:focus {  
    color: #f08080;   
    text-decoration: none;  
    cursor: pointer;  
}  
 
/* 标题样式 */  
h1, h2, h3 {  
    color: #666;  
    text-align: center;  
    margin-bottom: 20px; 
}  
   
/* 图片框样式 */  
.image-frame {  
    border: 2px solid #f08080;  
    border-radius: 5px;   
    overflow: hidden;   
    margin-bottom: 20px;   
}  
  
.image-frame img {
    width: 100%;   
    height: auto;   
}  
  
/* 订单详情弹窗标题 */  
.modal-title {  
    text-align: center;   
    color: #333;  
    margin-bottom: 20px;   
}  
  
/* 订单详情弹窗内容样式 */  
.modal-content p {  
    color: #666; 
    line-height: 1.6;   
    margin-bottom: 15px;   
}  
  
/* 订单详情弹窗按钮组样式 */  
.modal-actions {  
    text-align: center;   
    margin-top: 20px;   
}  
  
.modal-actions button {  
    background-color: #f08080;   
    border: none;  
    color: white;  
    padding: 10px 20px;  
    border-radius: 5px;   
    cursor: pointer;  
    transition: background-color 0.3s ease;   
    margin: 0 5px;   
}  
  
.modal-actions button:hover {  
    background-color: #ff5733;  
}  
  
.decorator-line {  
    height: 2px;   
    background-color: #f08080;   
    margin: 20px 0;   
}  
#order-details-modal{
    margin-top: 70px;
}
/* 订单详情区域样式 */  
.order-details {  
    display: flex;  
    align-items: flex-start;   
}  
  
/* 图片样式 */  
#product-image {  
    flex: 0 0 30%; 
    max-width: 300px;  
    margin-right: 20px;   
}  
  
/* 详情区域样式 */  
.order-details > h3,  
.order-details > p {  
    flex: 1;   
    margin: 0 0 10px 0;  
}  
  